<template>
  <div>
    <div class="header">
      <span>访问量</span> <i class="el-icon-warning"></i>
    </div>
    <div ref="myDiv" class="radar-echart"></div>
    <div class="end">日访问量 1,234</div>
  </div>
</template>

<script>
//回顾以前如何使用echarts
//1.在html的script中的src里引入echarts.js
//2.挂载的 容器，并且给id
//3.实例化一个echarts实例  let echart = echarts.init(document.getElementById(id))
//4.绘制（给配置  echarts.setOption(配置)）

import * as Echarts from "echarts";
import Radarsix from "./radarsix";
export default {
  name: "Radarsix",
  mounted() {
    this.echarts = Echarts.init(this.$refs.myDiv);
    this.echarts.setOption(Radarsix);
    this.initData();
  },
  methods: {
    initData() {
      setTimeout(() => {
        //resData是服务端返回的数据
        let resData = [
          {
            value: [50, 30, 50, 45, 78, 80],
            name: "one",
          },
          {
            value: [45, 50, 65, 80, 58, 50],
            name: "two",
          },
          {
            value: [45, 40, 55, 80, 53, 54],
            name: "three",
          },
        ];
        //重新绘制
        Radarsix.series[0].data = resData;
        this.echarts.setOption(Radarsix);
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.radar-echart {
  width: 275px;
  height: 200px;
}
.header {
  position: relative;
  span {
    color: #97a8be;
    font-size: 14px;
  }
  .el-icon-warning {
    position: absolute;
    right: 1px;
    color: #97a8be;
    padding: 3px 0;
  }
}
.end {
  width: 275px;
  color: #303133;
  border-top: 1px solid #97a8be;
}
</style>
